<template>
	<view class="surface">
		<view class="tabList spaceBetween">
			<view @click="change(index)" :class="tabIndex == index ? 'item itemCur' : 'item'" v-if="type == '2'" v-for="(item, index) in tabList">{{ item.title }}</view>
			<view @click="tabIndex = index" :class="tabIndex == index ? 'item itemCur' : 'item'" v-if="type == '3'" v-for="(item, index) in tabList1">{{ item.title }}</view>
		</view>
		<view v-html="data.content" v-show="tabIndex == 0"></view>
		<project :Project="data.Project" v-show="tabIndex == 1"></project>
		<goodslist :list="data.GoodsBoothUse" v-show="tabIndex == 2 && type == '2'"></goodslist>
		<guestsList :list="data.GoodsBoothUse" v-show="tabIndex == 2 && type == '3'"></guestsList>
		<exhibitionCardList :pageType="type" detClick :ticket="false"  v-show="tabIndex == 3" :list="data.homochronous"></exhibitionCardList>
	</view>
</template>

<script>
	import project from '../project/project.vue';
	import goodslist from '@/components/wbz/list/list.vue';
	import guestsList from '@/components/wbz/guestsList/guestsList.vue';
	import goodlist from '@/components/index/goodlist/goodlist.vue';
	import exhibitionCardList from "@/components/wbz/exhibitionCard/list.vue"
	export default {
		name: 'surface',
		components: {
			project,
			goodslist,
			goodlist,
			guestsList,
			exhibitionCardList,
		},
		props: {
			data: {
				type: Object,
				default: () => {},
			},
			type: {
				type: String,
				default: '2',
			},
		},
		data() {
			return {
				tabIndex: 0,
				tabList: [
					{
						title: '展会介绍',
					},
					{
						title: '展会日程',
					},
					{
						title: '展商名单',
					},
					{
						title: '同期大会',
					},
				],
				tabList1: [
					{
						title: '大会介绍',
					},
					{
						title: '大会日程',
					},
					{
						title: '演讲嘉宾',
					},
					{
						title: '同期展会',
					},
				],
			};
		},
		methods: {
			change(index) {
				let { card_business_status } = uni.getStorageSync('loginData');
				if (this.type == '2' && index == 2 && card_business_status == 0) {
					uni.showModal({
						title: '您还未填写名片',
						content: '是否立即前往',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/my/card/card',
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						},
					});
					return;
				}
				this.tabIndex = index;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.surface {
		.tabList {
			line-height: 88rpx;
			width: 690rpx;
			margin: 0 auto;
			.item {
				font-size: $uni-font-size-14;
				color: #999999;
			}
			.itemCur {
				font-weight: bold;
				color: #000000;
			}
		}
	}
</style>
